<header>
  <div id="mobile-menu">
      <div id="nav-button" class="fa fa-bars fa-2x button"></div>
  </div>
  <section id="logo"><a href="{{ site.baseurl }}/" class="omr">OMR Toolkit</a>
  </section>
  <div id="navbar">
      <ul id="navmenu">
          <li><a href="{{ site.baseurl }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
          <li>
              <ul id="getting-started-menu" class="menu">
                  <li><a href="{{ site.baseurl }}/starter/whatisomr.html"{% if page.menu == 'starter' %} class="active"{% endif %}>About</a>
                      <ul>
                          <li>
                            <a href="{{ site.baseurl }}/starter/whatisomr.html">What is OMR?</a>
                          </li>
                          <li>
                            <a href="{{ site.baseurl }}/starter/goals.html">Project goals</a>
                          </li>
                          <li>
                          <a href="{{ site.baseurl }}/starter/project.html">Working with the project</a>
                          </li>
                     </ul>
                  </li>
              </ul>
          </li>
          <li>
              <ul id="guide-menu" class="menu">
                  <li><a href="{{ site.baseurl }}/guide/building.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Getting started</a>
                      <ul>
                          <li><a href="{{ site.baseurl }}/guide/building.html">Building</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/guide/configuring.html">Configuring</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/guide/testing.html">Testing your runtime</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/guide/troubleshooting.html">Troubleshooting</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/guide/best-practices.html">Best practices</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/guide/coding-stds.html">Coding standards</a>
                          </li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <ul id="reference-menu" class="menu">
                  <li><a href="{{ site.baseurl }}/reference/architecture.html"{% if page.menu == 'reference' %} class="active"{% endif %}>Reference</a>
                      <ul>
                          <li><a href="{{ site.baseurl }}/reference/architecture.html">Architecture</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/reference/components.html">Components</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/reference/port.html">Port</a>
                          </li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <ul id="resources-menu" class="menu">
                  <li><a href="{{ site.baseurl }}/resources/omr-on-github.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
                      <ul>
                          <li><a href="{{ site.baseurl }}/resources/omr-on-github.html">OMR on GitHub</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/resources/presentations.html">Presentations</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/resources/whitepapers.html">Whitepapers</a>
                          </li>
                          <li><a href="{{ site.baseurl }}/resources/blogs.html">Blog posts</a>
                          </li>
                      </ul>
                  </li>
              </ul>
          </li>
		  <li>
          </li>
      </ul>
  </div>
</header>
